<template>
  <el-card>
    <p class="big-title">校园规章制度</p>
    <div class="item" v-for="item in regularList" :key="item.id" @click="showDesc(item)">
      <div class="title">{{ item.regularTitle }}</div>
      <div class="desc" v-html="item.regularDesc">
        {{ item.regularDesc }}
      </div>
      <!-- <p class="desc">
        <span>
          {{ item.desc }}
        </span>
      </p> -->
    </div>
    <!-- 规章制度具体内容对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="80%" :title="this.item.regularTitle">
      <div v-html="this.item.regularDesc">
        {{ this.item.regularDesc }}
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
// import staticServe from '../api/service/static.serve'
import commonServe from '../api/service/common.serve'
export default {
  data() {
    return {
      dialogVisible: false,
      regularList: [],
      item: {},
      img: ''
    }
  },
  created() {
    // this.getList()
    this.getRegularList()
  },
  methods: {
    showDesc(item) {
      console.log(item)
      this.item = item
      this.dialogVisible = true
    },
    // getList() {
    //   staticServe.getList().then((res) => {
    //     console.log(res)
    //     this.regularList = res
    //   })
    // },
    // 服务器
    getRegularList() {
      commonServe
        .getAllRegularList()
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.regularList = res.data.list
          } else {
            this.$message.warning('获取规章制度列表失败')
          }
        })
        .catch((err) => {
          this.$message.warning(err.$message)
        })
    }
  }
}
</script>

<style lang="less" scoped>
.el-card {
  .big-title {
    font-size: 24px;
    font-weight: bold;
  }
  .item {
    margin: 20px 0;
    overflow: hidden;
    padding: 10px;
    border: 1px solid #ececec;
    // width: 100%;
    height: 70px;
    border-radius: 5px;
    .title {
      // cursor: pointer;
      font-size: 20px;
      font-weight: bold;
    }
    .desc {
      font-size: 18px;
      // border: 1px solid #999;
      border-radius: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .item:hover {
    cursor: pointer;
    border-color: #3a62d7;
    transform: translateY(-5px);
    transition: 0.5s;
  }
}
</style>
